<template>
	<view class="xsdd_content">
		<!-- 头部 -->
		<view class="xsdd_header">
            <view class="xsdd_header_top">
				<uni-row class="form_row">
					<uni-col class="form_item" :span="9">
							<view class="label">单号：</view>
							<input style="flex: 1;" disabled type="text" v-model="formData.dh" placeholder="系统自动生成" />
					</uni-col>
					<uni-col class="form_item" :span="9">
						<view class="label">制单日期：</view>
						<uni-datetime-picker disabled v-model="formData.zhdate" type="date"/>
					</uni-col>
					<uni-col class="form_item" :span="6">
						<button hover-class="hover_btn" @click="handelSearch">保存</button>
					</uni-col>
				</uni-row>

				<uni-row class="form_row">
					<uni-col class="form_item" :span="12">
						<view class="label">客户名称：</view>
						<!-- <uni-data-select
							v-model="formData.khid"
							placeholder="请选择客户"
							:localdata="khList"
							@change="changeKh"
							></uni-data-select> -->
							<uni-combox @input="inputKh" :candidates="khNameList" placeholder="请选择客户" v-model="formData.khid"></uni-combox>
					</uni-col>
					<uni-col class="form_item" :span="12">
						<view class="label">欠款：</view>
						<input style="flex: 1;" type="text" disabled v-model="formData.qqk" placeholder="请输入欠款" />
					</uni-col>
				</uni-row>

				<uni-row class="form_row">
					<uni-col class="form_item" :span="8">
						<view class="label">收款类型：</view>
						<uni-data-select
							v-model="formData.dj_type"
							placeholder="请选择收款类型："
							:localdata="djtypeList"
							></uni-data-select>
					</uni-col>
					<uni-col class="form_item" :span="8">
						<view class="label">收款方式：</view>
						<uni-data-select
							v-model="formData.lkfs"
							placeholder="请选择收款方式："
							:localdata="skfsList"
							></uni-data-select>
					</uni-col>
					<uni-col class="form_item" :span="8">
						<view class="label">收款银行：</view>
						<uni-data-select
							v-model="formData.blankno"
							placeholder="请选择收款银行："
							:localdata="blanknoList"
							></uni-data-select>
					</uni-col>
				</uni-row>

				<uni-row class="form_row">
					<uni-col class="form_item" :span="8">
						<view class="label">收款金额：</view>
						<input type="number" v-model="formData.je" placeholder="请输入收款金额" />
					</uni-col>
					<uni-col class="form_item" :span="8">
						<view class="label">优惠金额：</view>
						<input type="number" v-model="formData.yhje" placeholder="请输入优惠金额" />
					</uni-col>
					<uni-col class="form_item" :span="8">
						<view class="label">补差价：</view>
						<input type="number" v-model="formData.bcjje" placeholder="请输入补差价" />
					</uni-col>
				</uni-row>
			</view>

			<view class="header_amount">
				<!-- 收款金额 + 优惠金额 + 补差价 -->
				<text>￥ {{ total_je.toFixed(2) || '0.00' }}</text>
			</view>

			<!-- <view class="header_amount">
				<view class="amount_item" v-for="(item, index) in amountList" :key="index">
					<view class="amount_name"> {{ item.name }}</view>
					<view> {{ item.sl }}</view>
					<view v-if="index != amountList.length - 1" class="amount_line"></view>
				</view>
			</view> -->
		</view>
		<!--  -->

		<view class="xsdd_list">
			<!-- <scroll-view style="height: 100%;" scroll-y="true">
				<view class="xsdd_item" v-for="(item, index) in list" :key="index">
					<view class="left_info">
						<view class="info_row" style="padding: 10rpx 0;">
							<view>单号：{{ item.dh || 0 }}</view>
							<view class="info_item">日期：{{ item.zhdate || '' }}</view>
							<view class="info_item remark_el">备注：{{ item.remark || '' }}</view>
						</view>
						<view class="info_row">
							<view class="info_item">总数量：{{ item.sl_sum || 0 }}</view>
						</view>
					</view>

					<view class="right_info">
						<view style="color: #fb1904;">{{ item.statename || '' }}</view>
						<view style="color: #ffa035;">￥ {{ item.fkje || 0 }}</view>
					</view>
				</view>
			</scroll-view> -->
		</view>
	</view>
</template>

<script>
import customHeader from "@/components/custom-header/custom-header.vue";
import utils from "@/utils/utils.js";
import GetDate from "@/utils/date.js";
import Http from '@/service/api'
	export default {
		components: {
			customHeader,
        
		},
		data() {
			return {
				form: {},
				filtrList: [
                    { value: '全部', text: "全部" },
                    { value: '已审核', text: "已审核" },
                    { value: '未审核', text: "未审核" },
                ],
				amountList: [
					{ name: '订单金额', sl: '￥ 0' },
					{ name: '订单数量', sl: 0 },
					{ name: '订单必输', sl: 0 },
				],
				list: [], 
				formData: {
					searchstate: '全部'
				},
				page: 1,
				size: 20,
				showLower: false, // 是否触底加载更多
				skfsList: [], // 收款方式
				khList: [], // 客户名称
				khNameList: [], // 	客户名称 
				djtypeList: [], // 	客户名称 
				blanknoList: [], // 	客户名称 
			}
		},
        computed: {
			total_je() {
				let je = Number(this.formData.je) || 0
				let yhje = Number(this.formData.yhje) || 0
				let bcjje = Number(this.formData.bcjje) || 0
				let total = je + yhje + bcjje
				return total
			}
		},
		onLoad() {
			let today = GetDate.getToday().time
			this.formData.zhdate = today

			console.log('== 11 ', GetDate.getToday().time)
			this.GetBaseInfoList()
		},
		methods: {
			handelSearch() {
				console.log('== 11 formData ', this.formData)
				if(!this.formData.khid) {
					uni.showToast({
						title: '请选择客户',
						icon: 'none'
					});
					return
				}

				if(!this.formData.je) {
					uni.showToast({
						title: '请输入收款金额',
						icon: 'none'
					});
					return
				}

				let param = {
					uid: uni.getStorageSync('uid'),
					main: {
						...this.formData,
						zhuser: uni.getStorageSync('loginUserName'),
					}
				}

				console.log('== param ', param)

				Http.OrderSkdSubmit(JSON.stringify(param)).then(r => {
					uni.showToast({
						title: '保存成功',
						icon: 'none'
					});

					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 1500)
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					});
				})
			},
		
			changeKh(e) {
				Http.GetKhqkInfo({khbh: e}).then(r => {
					this.formData = {
						...this.formData,
						qqk: r.qkje
					}
				}).catch( err => {
					console.log('= err', err)
				})
			},
			inputKh(e) {
				let khbh = this.khList.filter(i => i.name === e)[0]?.bh
				if (!khbh) {
					this.formData = {
						...this.formData,
						qqk: 0
					}
					return
				}
				Http.GetKhqkInfo({khbh}).then(r => {
					this.formData = {
						...this.formData,
						qqk: r.qkje
					}
				}).catch( err => {
					console.log('= err', err)
				})
			},
			// 获取基础数据
			GetBaseInfoList() {
                let param = { param: 'skfs,khid,djtype,blankno' }
                Http.GetBaseInfoList(param).then(r => {
                   console.log('== 11 基础数据 ', r)
                   this.skfsList = r.skfs.map(i => ({...i, value: i.bh, text: i.name}))
                   this.khList = r.khid.map(i => ({...i, value: i.bh, text: i.name}))
                   this.khNameList = r.khid.map(i => i.name)
                   this.djtypeList = r.djtype.map(i => ({...i, value: i.bh, text: i.name}))
                   this.blanknoList = r.blankno.map(i => ({...i, value: i.bh, text: i.name}))
                   
                }).catch(err => {
                    console.log('== err ', err)
                })
            },
			
		}
	}
</script>

<style lang="less" scoped>
.xsdd_content {
    height: 100vh;
	display: flex;
	flex-direction: column;
	font-size: 16rpx;

	.xsdd_header {
		width: 100%;
		padding: 15rpx 10rpx;
		box-sizing: border-box;
		
		.xsdd_header_top {
			// display: flex;
			// align-items: center;
			// border-bottom: 2rpx dashed #cbcbcb;
			// padding-bottom: 10rpx;

			.form_row {
				width: 100%;
				display: flex;
				align-items: center;


				.form_item {
					display: flex;
					align-items: center;
					padding-bottom: 20rpx;

					.label {
						white-space: nowrap;
					}

					button {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 120rpx;
						height: 40rpx;
						background: #f9a94d;
						color: #fff;
						margin: 0;
						margin-left: 10rpx;
					}
					
					.hover_btn {
						background: #da9444;
					}
				}
				
			}
		}

		.work_left {
			flex: 1;
			display: flex;
			align-items: center;

			.work_item {
				margin-right: 20rpx;
			}
		}

		.header_amount {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #fff;
			// padding-top: 20rpx;
			font-size: 20rpx;
			height: 150rpx;
			background: #ccc;
			color: #fff;
			font-size: 35rpx;


			.amount_item {
				flex: 1;
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				color: #f9a94d;

				.amount_name {
					margin-bottom: 10rpx;
					font-size: 20rpx;
					color: #000;
				}

				.amount_line {
					position: absolute;
					bottom: 10rpx;
					right: 0;
					width: 2rpx;
					height: 50rpx;
					border-right: 2rpx dashed #c3c3c3;
				}
			}
		}
	}

	.xsdd_list {
		flex: 1;
		overflow: auto;
		background: #f5f5f5;
		padding-top: 10rpx;
		padding-left: 5rpx;

		.xsdd_item {
			padding: 10rpx;
			background: #fff;
			display: flex;
			margin-bottom: 10rpx;

			

			.left_info {
				flex: 1;
				overflow: hidden;

				.info_row {
					display: flex;
					align-items: center;
					white-space: nowrap;   
					.info_item {
						margin-left: 20rpx;
					}

					.remark_el {
						white-space: nowrap;           /* 不换行 */
						overflow: hidden;              /* 隐藏超出的文本 */
						text-overflow: ellipsis;       /* 超出的部分显示省略号 */
					}
				}
			}

			.right_info {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
			}

		}

		
	}
}
</style>
